<template>
    <div class="invites">
        <div class="header">
            会议邀请
        </div>
        <div class="bluetitle"><span></span>会议信息</div>
        <div class="listbox">
            <div class="title">{{ details.projectName }}</div>
            <div class="content">
                <span class="l">会议时间</span>
                <span class="r">{{ details.meetingStartTime }}</span>
            </div>
            <div class="content">
                <span class="l">会议地点</span>
                <span class="r">{{ details.meetingPlace }}</span>
            </div>
            <div class="content">
                <span class="l">会议内容</span>
                <span class="r">{{ details.projectContent }}</span>
            </div>
            <div class="content">
                <span class="l">会议联系人</span>
                <span class="r">{{ details.meetingInitiator }}</span>
            </div>
        </div>
        <div class="bluetitle"><span></span>单位科室填写</div>
        <div class="listbox" style="line-height: 40px;padding-top: 10px;">
            <div class="content">
                <span class="l">单位</span>
                <span class="r">{{ details.departName }}</span>
            </div>
            <div class="content">
                <span class="l">科室</span>
                <el-select v-model="officeId" placeholder="请选择" style="width: calc(100% - 92px)" @change="getpeople()">
                    <el-option
                    
                    v-for="item in options"
                    :key="item.id"
                    :label="item.departName"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="bluetitle"><span></span>参会人员信息填写</div>
        <div class="listbox">
            <div class="listbox2" v-for="(item, index) in peopleList" :key="index">
                <div class="content">
                    <span class="l">人员姓名</span>
                    <el-input v-model="item.realName" :class="[peopleList.length > 1? 'width1' : 'width2']" ></el-input>
                    <span v-if="peopleList.length > 1" @click="delpeople(index)" style="color: #428FFC;font-size: 20px;font-weight: 500;padding: 0 8px;"> - </span>
                </div>

                <div class="content">
                    <span class="l">联系方式</span>
                    <el-input v-model="item.mobile" style="width: calc(100% - 92px);"></el-input>
                </div>
            </div>
            <div class="add" @click="addpeople()">＋ 添加人员</div>
        </div>
        <div class="btn" style="background-color: #999;" v-if="details.meetingStatus == 6">已入库</div>
        <div class="btn" style="background-color: #428FFC;" @click="tometting()" v-else>提交</div>
    </div>
  </template>
  <script>
import { http } from '@/api'
  export default {
    name: 'Login',
    data() {
      return {
        form: {},
        details: {},
        id: 0,
        officeId: '',
        peopleList: [{realName:'',mobile:''}],
        options:[],
        getstatus: ['','待接受','已接受','已拒绝','已签到','已签退']
      }
    },

    created(){
        
        this.getdetail()
    },
    methods: {
        delpeople(index){
            this.peopleList.splice(index,1)
        },
        getpeople(){
            http.meeting_invites.peopleList({
                meetingId: '8204175887153421607A2',
                officeId: this.officeId
                }).then(res => {
                    console.log(res.data);
                    this.peopleList = res.data.length == 0 ? [{realName:'',mobile:''}]:res.data
                })
        },
        addpeople() {
            let sum = 0
            this.peopleList.forEach(el => {
                if (el.name == '' || el.phone == '' ) {
                    this.$message.error("请先将人员信息填写完整")
                    sum ++
                    return
                }
            });
            if(sum == 0){
                this.peopleList.push({realName:'',mobile:''})
            }
        },
        getdetail(){
            http.meeting_invites.detail({
                meetingId: this.$route.query.id
            }).then(res => {
                this.details = res.data,
                this.details.ch = this.getstatus[this.details.receiveStatus]
                http.meeting_invites.departmentList({
                    topId: this.details.departId
                }).then(res => {
                    this.options = res.data
                })
            })
        },
        tometting(){
            http.meeting_invites.tomeetList({
                meetingId: this.$route.query.id,
                officeId: this.officeId,
                joinList: this.peopleList
            }).then(res => {
            this.$message.success(res.msg)
            this.getdetail()
      })
    }
    }
  }
  </script>
  
  <style lang="scss">
  .width1{
    width: calc(100% - 128px);
  }
  .width2{
    width: calc(100% - 92px)
  }
  .bluetitle{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    height: 16px;
    margin: 30px 25px 15px 25px;
    line-height: 15px;
    display: flex;
    span{
        width: 3px;
        height: 15px;
        background: #428FFC;
        border-radius: 1.5px;
        display: inline-block;
        margin-right: 10px;
    }
  }
  .invites {
    .header{
        height: 65px;
        line-height: 65px;
        width: 100%;
        background-color: #fff;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;

    }
    .listbox{
        width: calc(100% - 32px);
        margin: 0 16px 0 16px;
        background-color: #fff;
        border-radius: 20px;
        padding: 0 21px  16px 21px;
        .title{
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            line-height: 42px;
        }
        .add{
            height: 52px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #428FFC;
            text-align: center;
            line-height: 52px;
        }
        .content{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 26px;
                display: flex;
                .l{
                    width: 92px;
                    display: inline-block;
                }
            }
    }
    .listbox2{
        .content{
            line-height: 40px;
        }
        line-height: 60px;
        border-bottom: 1px solid #E9E9E9;
        padding-bottom: 15px;
        padding-top: 10px;
    }
    .btn{
        // width: ;
        height: 40px;
        border-radius: 10px;
        line-height: 40px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        width: calc(100% - 32px);
        margin: 25px 16px 0;
    }
  }

  </style>
  